---
title: Kleurenschema
image: /images/user-guide/fields/field.png
---

<Frame>
  <img src="/images/user-guide/fields/field.png" alt="Header" />
</Frame>

## Color Scheme Card

Vertegenwoordigt verschillende kleurschema's en is speciaal afgestemd op lichte en donkere thema's.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemeCard } from "twenty-ui/display";

export const MyComponent = () => {
  return (
      <ColorSchemeCard
      variant="Dark"
      selected={true}
      />
  );
};
```

</Tab>

<Tab title="Props">

| Props                     | Soort                                   | Beschrijving                                                                                    | Standaard |
| ------------------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------- | --------- |
| variant                   | tekenreeks                              | De variant van het kleurschema. Opties omvatten `Donker`, `Licht`, en `Systeem` | licht     |
| geselecteerd              | booleaan                                | Als `true`, wordt een vinkje weergegeven om het geselecteerde kleurenschema aan te geven        |           |
| aanvullende eigenschappen | `React.ComponentPropsWithoutRef<'div'>` | Standaard HTML `div` element eigenschappen                                                      |           |

</Tab>

</Tabs>

## Kleurschema Kiezer

Laat gebruikers kiezen tussen verschillende kleurschema's.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemePicker } from "twenty-ui/display";

export const MyComponent = () => {
  return <ColorSchemePicker
  value="Dark"
  onChange
  />;
};
```

</Tab>

<Tab title="Props">

| Props    | Soort           | Beschrijving                                                                                 |
| -------- | --------------- | -------------------------------------------------------------------------------------------- |
| waarde   | `Kleurenschema` | Het momenteel geselecteerde kleurenschema                                                    |
| onChange | functie         | De terugroepfunctie die je wilt activeren wanneer een gebruiker een kleurenschema selecteert |

</Tab>

</Tabs>
